<!--
 swiper轮播插件实现
 swiper3.4.2版本，https://www.swiper.com.cn/
 -->
<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
  </div>
</template>

<script>
  import '@/assets/js/swiper/swiper-3.4.2.min.js'
  import '@/assets/js/swiper/swiper-3.4.2.min.css'
  export default {
    name: "swiper",
    mounted() {
      var mySwiper = new Swiper ('.swiper-container', {
        direction: 'vertical',
        loop: true,

        // 如果需要分页器
        pagination: '.swiper-pagination',

        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',

        // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',
      })
    }
  }
</script>

<style scoped lang="scss">
.swiper-container {
  width: 600px;
  height: 300px;
}
.swiper-slide {
  /*width: 400px;*/
  /*height: 200px;*/
  background: red;
  &:nth-child(2){
    background: orange;
  }
  &:nth-child(3){
    background-color: yellow;
  }
}
</style>
